<!-- 我的企业名单 -->
<template>
	<view class="my-business-list-box">
		<view class="my-business-list-filter">
			<view class="filter-btn" @tap="filterFun">
				<image class="my-business-list-filter-img" src="/static/main/shaixuan.png"></image>
				<text>筛选</text>
			</view>
			<view class="add-btn" @tap="addFun">
				<image class="my-business-list-filter-img" src="/static/main/xinzeng.png"></image>
				<text>新增</text>
			</view>
		</view>
		<view class="my-business-list-table">
			<view class="my-business-list-thead">
				<view class="my-business-list-th text-l w40">
					<view>企业企业</view>
				</view>
				<view class="my-business-list-th text-l w40">
					<view>最近日期</view>
				</view>
			</view>
			<view class="my-business-list-tr-box" v-for="tr in tableList" :key="tr.id">
				<view class="my-business-list-tr">
					<view class="my-business-list-td text-l w40">
						{{tr.entName}}
					</view>
					<view class="my-business-list-td text-l w40" @tap="toDetail(tr)">
						{{tr.date}}
						<uni-icons type="right" size="12"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="entFilterDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog no-padding-dialog my-no-title-dialog" type="info"
				:before-close="true" confirmText="确认" cancelText="重置" @confirm="dialogFilterConfirm"
				@close="dialogFilterClose">
				<view class="filter-dialog-box">
					<view class="filter-dialog-title-box">
						<text class="filter-dialog-title">企业筛选</text>
						<uni-icons @tap="closeDialog" class="filter-dialog-close" type="closeempty"
							size="20"></uni-icons>
					</view>
					<view class="filter-form">
						<view class="form-cell">
							<view class="text-l">最近日期</view>
							<view class="cell-box my-date-pick-box">
								<uni-datetime-picker :end="dateEnd" :border="false" type="date"
									@change="changeDateStart">
									<text v-if="dateStart">{{dateStart}}</text>
									<text class="placeholder-color" v-else>起始时间</text>
								</uni-datetime-picker>
								至
								<uni-datetime-picker :start="dateStart" :border="false" type="date"
									@change="changeDateEnd">
									<text v-if="dateEnd">{{dateEnd}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
							</view>
						</view>
						<view class="cell-box">
							<text class="cell-title">企业名称</text>
							<input class="cell-input" v-model="entName" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="entAddDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog no-padding-dialog my-no-title-dialog" type="info"
				:before-close="true" confirmText="提交" cancelText="取消" @confirm="dialogAddConfirm"
				@close="dialogAddClose">
				<view class="filter-dialog-box">
					<view class="filter-dialog-title-box">
						<text class="filter-dialog-title">新增企业</text>
						<uni-icons @tap="closeAddEntDialog" class="filter-dialog-close" type="closeempty"
							size="20"></uni-icons>
					</view>
					<view class="filter-form">
						<view class="cell-box mt60">
							<text class="cell-title">企业名称</text>
							<input class="cell-input" v-model="addEntName" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						entName: '经销商1',
						date: '2024-06-22'
					},
					{
						id: '002',
						entName: '经销商2',
						date: '2024-06-22'
					},
					{
						id: '003',
						entName: '经销商3',
						date: '2024-06-22'
					},
					{
						id: '004',
						entName: '经销商4',
						date: '2024-06-22'
					},
					{
						id: '005',
						entName: '北京中煤华远经销公司',
						date: '2024-06-22'
					}
				],
				dateStart: '',
				dateEnd: '',
				entName: '',
				addEntName: '',
			}
		},
		methods: {
			filterFun() {
				this.dateStart = '';
				this.dateEnd = '';
				this.entName = '';
				this.$refs.entFilterDialog.open()
			},
			dialogFilterConfirm() {
				this.$refs.entFilterDialog.close()
			},
			dialogFilterClose() {
				this.dateStart = '';
				this.dateEnd = '';
				this.entName = '';
			},
			closeDialog() {
				this.$refs.entFilterDialog.close()
			},
			changeDateStart(e) {
				this.dateStart = e
			},
			changeDateEnd(e) {
				this.dateEnd = e
			},
			addFun() {
				this.addEntName = ''
				this.$refs.entAddDialog.open()
			},
			dialogAddConfirm() {
				if (!this.addEntName) {
					uni.showToast({
						icon: 'none',
						title: '企业名称不能为空!'
					});
					return
				}
				this.$refs.entAddDialog.close()
				this.tableList.push({
					id: '009',
					entName: this.addEntName,
					date: '2024-06-22'
				})
			},
			dialogAddClose() {
				this.$refs.entAddDialog.close()
			},
			closeAddEntDialog() {
				this.$refs.entAddDialog.close()
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/oms/exhRecords'
				});
			}
		}
	}
</script>

<style>
	.my-business-list-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		padding: 24rpx 0;
		box-sizing: border-box;
	}


	.my-business-list-filter {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
	}

	.filter-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.add-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.my-business-list-filter-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.my-business-list-table {
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 45rpx 110rpx 20rpx;
		box-sizing: border-box;
	}

	.my-business-list-thead {
		height: 80rpx;
		line-height: 80rpx;
		/* padding: 20rpx 0; */
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.my-business-list-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	/* 
	.my-business-list-tr-box:last-child {
		border: none;
	} */

	.my-business-list-tr {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.my-business-list-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.my-business-list-td {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.w40 {
		flex: 1
	}

	.filter-dialog-box {
		width: 100%;
		text-align: center;
		position: relative;
	}

	.filter-dialog-close {
		position: absolute;
		right: 30rpx;
		top: 8rpx;
	}

	.filter-dialog-title-box {
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.filter-dialog-title {
		font-family: PingFangSC-Semibold;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.filter-form {
		padding: 0 45rpx 122rpx 26rpx;
	}

	.form-cell {
		margin-top: 30rpx;
	}

	.cell-box {
		height: 97rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.mt60 {
		margin-top: 60rpx;
	}

	.cell-title {
		text-align: left;
		width: 200rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
	}

	.cell-input {
		flex: 1;
		text-align: right;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.placeholder-color {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
	}
</style>